import React, { useEffect, useState } from 'react';
import http from '../../utils/http';
import './index.css';
import { useNavigate } from 'react-router-dom'
const Index: React.FC = () => {
    const [ShopList, setShopList] = useState<any>([]);
    const navigate = useNavigate()
    // 获取数据
    const getShopList = () => {
        http.get('/restorative/list').then(res => {
            console.log(res.data.data);
            setShopList(res.data.data);
        });
    };

    useEffect(() => {
        getShopList();
    }, []);

    return (
        <div>
            <div style={{
                background: '#fff'
            }}>
            </div>
            {/* 正文 */}
            <div className='shop-box'>
                {/* 使用添加了瀑布流样式的容器包裹商品列表渲染部分 */}
                <div className="waterfall-flow">
                    {ShopList.map((item: any, index: number) => (
                        <div key={index} className="waterfall-item" onClick={() => navigate(`/buymedicinedetail/${item.restorativesid}`)}>
                            <img style={{ width: '100%', height: 'auto' }} src={item.restorativesimage} alt="" />
                            <div> 姓名：{item.restorativesname}</div>
                            <div>标题：{item.restorativestitle}</div>
                            <div className='ellipsis'> 描述：{item.restorativesdesc}</div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
};

export default Index;